<template>
  <div class="add">

    <el-dialog :visible="value" :title="mode" width="90%" @close="closeEvent">
      <el-form ref="form" class="form" :model="form" :rules="rules">
        <el-form-item label="学科" prop="subject">
          <el-select v-model="form.subject" placeholder="请选择">
            <el-option v-for="item in subject" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="阶段" prop="step">
          <el-select v-model="form.step" placeholder="请选择">
            <el-option label="初级" value="1" />
            <el-option label="中级" value="2" />
            <el-option label="高级" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterprise">
          <el-select v-model="form.enterprise" placeholder="请选择">
            <el-option v-for="item in enterprise" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-cascader
            v-model="form.city"
            size="large"
            :options="regionData"
          />
        </el-form-item>
        <el-form-item label="题型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="form.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <hr>
        <el-form-item label="试题标题 " prop="title">
          <div style="margin-top: 40px;">
            <quillEditor v-model="form.title" />
          </div>
        </el-form-item>
        <el-form-item v-if="form.type=='1'" label="单选">
          <div class="items">
            <div class="item">
              <el-radio v-model="form.single_select_answer" label="A">A</el-radio>
              <el-input v-model="form.select_options[0].text" />
              <uploadimg v-model="form.select_options[0].image" />

            </div>
            <div class="item">
              <el-radio v-model="form.single_select_answer" label="B">B</el-radio>
              <el-input v-model="form.select_options[1].text" />
              <uploadimg v-model="form.select_options[1].image" />

            </div>
            <div class="item">
              <el-radio v-model="form.single_select_answer" label="C">C</el-radio>
              <el-input v-model="form.select_options[2].text" />
              <uploadimg v-model="form.select_options[2].image" />
            </div>
            <div class="item">
              <el-radio v-model="form.single_select_answer" label="D">D</el-radio>
              <el-input v-model="form.select_options[3].text" />
              <uploadimg v-model="form.select_options[3].image" />
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="form.type=='2'" label="多选">
          <div class="items">
            <div class="item">
              <el-checkbox v-model="form.multiple_select_answer" label="A">A</el-checkbox>
              <el-input v-model="form.select_options[0].text" />
              <uploadimg v-model="form.select_options[0].image" />
            </div>
            <div class="item">
              <el-checkbox v-model="form.multiple_select_answer" label="B">B</el-checkbox>
              <el-input v-model="form.select_options[1].text" />
              <uploadimg v-model="form.select_options[1].image" />
            </div>
            <div class="item">
              <el-checkbox v-model="form.multiple_select_answer" label="C">C</el-checkbox>
              <el-input v-model="form.select_options[2].text" />
              <uploadimg v-model="form.select_options[2].image" />
            </div>
            <div class="item">
              <el-checkbox v-model="form.multiple_select_answer" label="D">D</el-checkbox>
              <el-input v-model="form.select_options[3].text" />
              <uploadimg v-model="form.select_options[3].image" />
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="form.type=='3'" class="anser" style="display: flex;" label="简答">
          <el-input
            v-model.trim="form.short_answer"
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 999999999}"
            style="flex: 1; margin-left: 20px; "
          />
        </el-form-item>
        <el-form-item label="解析视频">
          <UploadVideo v-model="form.video" />
        </el-form-item>
        <el-form-item label="答案解析" prop="answer_analyze">
          <div style="margin-top: 40px;margin-bottom: 40px;">
            <quillEditor v-model.trim="form.answer_analyze" />
          </div>
          <hr>
        </el-form-item>
        <el-form-item label="试题备注" prop="remark">
          <el-input v-model.trim="form.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="text-align: center;">

          <el-button @click="closeEvent">取消</el-button>
          <el-button type="primary" @click="addEvent">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import UploadVideo from '@/components/lib/uploadvideo.vue'
import uploadimg from '@/components/lib/uploadimg.vue'
import { regionData } from 'element-china-area-data'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { questionAdd, questionEdit } from '@/api/questionlist.js'
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor,
    uploadimg,
    UploadVideo
  },
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      regionData,
      showdialog: false,
      enterprise: [],
      subject: [],
      mode: '编辑题库测试',
      form: {
        title: '', //	是	string	标题
        subject: '', //	是	int	学科id标识
        step: '', //	是	int	阶段1、初级 2、中级 3、高级
        enterprise: '', //	是	int	企业id标识
        city: [

        ],
        //	是	array	[省、市、区县]
        type: '', //	是	string	题型 1单选 、2多选 、3简答
        difficulty: '', //	是	int	题目难度 1简单 、2一般 、3困难
        single_select_answer: '', //	是	string	单选题答案
        multiple_select_answer: [], //	是	array	多选题答案
        short_answer: '', //	是	string	简答题答案
        video: '', //	否	string	解析视频地址
        answer_analyze: '', //	是	string	答案解析
        remark: '', //	是	string	答案备注
        select_options: [
          {
            label: 'A',
            text: '',
            image: ''
          },
          {
            label: 'B',
            text: '',
            image: ''
          },
          {
            label: 'C',
            text: '',
            image: ''
          },
          {
            label: 'D',
            text: '',
            image: ''
          }
        ] //	是	array	选项，介绍，图片介绍
      },
      rules: {
        subject: [{ required: true, message: '必传', trigger: 'change' }],
        step: [{ required: true, message: '必传', trigger: 'change' }],
        enterprise: [{ required: true, message: '必传', trigger: 'change' }],
        city: [{ required: true, message: '必传', trigger: 'change' }],
        type: [{ required: true, message: '必传', trigger: 'change' }],
        difficulty: [{ required: true, message: '必传', trigger: 'change' }],
        answer_analyze: [{ required: true, message: '必传', trigger: 'change' }],
        remark: [{ required: true, message: '必传', trigger: 'change' }],
        multiple_select_answer: [
          { type: 'array', required: true, message: '请选择至少一个选项', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    console.log(this.regionData)
  },
  methods: {

    async addEvent() {
      if (this.mode === '新增题库测试') {
        await this.$refs.form.validate()
        await questionAdd(this.form)
        this.$message.success('新增成功')
      } else if (this.mode === '编辑题库测试') {
        await this.$refs.form.validate()
        await questionEdit(this.form)
        this.$message.success('修改成功')
      }
      this.closeEvent()
      this.$emit('getdata')
    },
    async closeEvent() {
      this.$emit('input', false)
      this.showdialog = false
      await this.$refs.form.resetFields()
      this.form = {
        title: '', //	是	string	标题
        subject: '', //	是	int	学科id标识
        step: '', //	是	int	阶段1、初级 2、中级 3、高级
        enterprise: '', //	是	int	企业id标识
        city: [

        ],
        //	是	array	[省、市、区县]
        type: '', //	是	string	题型 1单选 、2多选 、3简答
        difficulty: '', //	是	int	题目难度 1简单 、2一般 、3困难
        single_select_answer: '', //	是	string	单选题答案
        multiple_select_answer: [], //	是	array	多选题答案
        short_answer: '', //	是	string	简答题答案
        video: '', //	否	string	解析视频地址
        answer_analyze: '', //	是	string	答案解析
        remark: '', //	是	string	答案备注
        select_options: [
          {
            label: 'A',
            text: '',
            image: ''
          },
          {
            label: 'B',
            text: '',
            image: ''
          },
          {
            label: 'C',
            text: '',
            image: ''
          },
          {
            label: 'D',
            text: '',
            image: ''
          }
        ] //	是	array	选项，介绍，图片介绍
      }
      this.$refs.form.clearValidate()
    }

  }

}

</script>

<style lang="scss" scoped>
::v-deep .el-input{
  width: 69%;
}
::v-deep .el-dialog__header{
    text-align: left;
  }
.form {
  width: 832px;
  margin: 0 auto;

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    margin-left: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    margin-left: 20px;
  }

  .anser{

    width: 100%;
    ::v-deep .el-form-item__content{
      flex: 1;
    }
  }
  .items{
    margin-top: 40px;
    .item{
      margin-top: 10px;
      display: flex;
      align-items: center;
      padding-left: 70px;

    }

  }
}
</style>
